Hello Everyone! This video is a step-by-step tutorial that teaches viewers how to build a simple but functional to-do list application using HTML, CSS, and JavaScript. The video is presented by Awais Mughal, a skilled software developer who provides clear and concise explanations throughout the tutorial.
In the video, Awais starts by explaining the basic structure of a to-do list app and how it should function. He then proceeds to demonstrate how to build the interface using HTML and CSS, showing viewers how to create the various elements of the app such as the input field, the list of tasks, and the buttons to add and delete tasks.
Next, Awais dives into the JavaScript code, showing viewers how to create the logic behind the app. He covers important concepts such as event handling, DOM manipulation, and working with arrays to create the functionality of the app. He also shows how to save tasks to local storage so that they can persist even after the user closes the app.
Throughout the video, Awais provides clear and detailed explanations of each step, making it easy for viewers to follow along and understand the code. By the end of the video, viewers will have built their own to-do list app and will have gained valuable experience in HTML, CSS, and JavaScript programming. This video is perfect for beginners who are looking to improve their programming skills and build a practical project at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do list by Awais Mughal</title>
<style>
*{
box-sizing: border-box;
font-family: 'calibri', 'sans-serif';
}
body{
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container{
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1{
text-align: center;
margin-top: 20px;
}
input[type=text]{
width: 70%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button{
width: 30%;
background-color: #4caf50;
color: #fff;
padding: 14px 20px;
margin: 8px 0;
bottom: none;
border-radius: 4px;
cursor: pointer;
}
button:hover{
background-color: #45a049;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li{
border-bottom: 1px solid #ccc;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
li:last-child{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-container">
<input type="text" placeholder="Add new task" id="taskInput">
<button onclick="addTask()">Add</button>
</div>
<ul id="taskList"></ul>
</div>
</body>
<script>
let taskList = document.getElementById("taskList");
let taskInput = document.getElementById("taskInput");
function addTask() {
let task = taskInput.value;
if (task.trim() === "") {
alert("Task cannot be empty!");
return;
}
let li = document.createElement("li");
li.innerHTML = `${task}<span class="delete">×</span>`;
taskList.appendChild(li);
taskInput.value = "";
li.querySelector(".delete").addEventListener("click", function () {
li.remove();
});
}
</script>
</html>